<template>
    <div>
        <van-nav-bar :title="title" safe-area-inset-top />
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

const title = ref('菜谱大全')
const route = useRoute()
watch(
    () => route.meta,
    meta => { title.value = meta.title },
)


</script>

<style lang="scss" scoped>
.van-nav-bar {
    background-color: #ee7350;


    ::v-deep(.van-nav-bar__title) {
        color: #fff
    }
}
</style>